<template>
  <HeaderName :currentUser="currentUser"/>
  <div class="home-page">
    <section class="py-5 text-center container">
      <div class="row py-lg-5">
        <div class="col-lg-6 col-md-8 mx-auto">
          <img src="../assets/callout.svg" alt="callout" class="w-50"/>
          <h2 class="font-weight-light">随心写作，自由表达</h2>
          <router-link to="/createPost">
            <a href="#" class="btn btn-primary my-2">开始写文章</a>
          </router-link>
        </div>
      </div>
    </section>
    <Uploader action='/upload' :beforeUpload="beforeUpload" @file-uploaded="onFileUploaded">
        <h2>点击上传</h2>
        <template #loading>
            <div class="spinner-border" role="status">
                <span class="sr-only">loading...</span>
            </div>
        </template>
        <template #uploaded='dataProps'>
            <img :src="dataProps.uploadData.data.url" width="500"/>
        </template>
    </Uploader>
    <h4 class="font-weight-bold text-center">发现精彩</h4>
    <ColumList :list='testData'/>
    <button
      class="btn btn-outline-primary mt-2 mb-5 mx-auto btn-block w-25"
       @click="loadMorePage" v-if="!isLastPage"
    >
      加载更多
    </button>
  </div>
</template>
<script lang="ts">
import { defineComponent,computed, onMounted } from 'vue';
import 'bootstrap/dist/css/bootstrap.min.css'
import {GlobalDataProps,ResponseType,ImageProps} from '../store'
import {useStore} from 'vuex'
import ColumList from '../components/ColumList.vue'
import HeaderName from '../components/HeaderName.vue'
import createMessage from '../components/createMessage'
import Uploader from '../components/Uploader.vue'
export default defineComponent({
  name: 'App',
  components: {
    ColumList,
    HeaderName,
    Uploader
  },
  setup(){
    // 拿仓库数据----computed
    const store=useStore<GlobalDataProps>()
    const testData=computed(()=>store.state.columns.data)
    const currentUser=computed(()=>store.state.user)
    // getter的用法
    const biggerColumnLen=computed(()=>store.getters.biggerColumnLen)
    // beforeUpload是校验格式是否正确
    const beforeUpload=(file:File)=>{
      const isJPG=file.type==='image/jpeg'
      if(!isJPG){
        createMessage('上传图片只能是JPG','error')
      }
      return isJPG
    }
    onMounted(()=>{
      store.dispatch('fetchColumns')
    })
    // ResponseType<>
    const onFileUploaded=(rawData:any)=>{
      createMessage('上传图片成功','success')
    }
    return {
      testData,
      currentUser,
      biggerColumnLen,
      beforeUpload,
      onFileUploaded
    }
  }
});
</script>

<style scoped>
  .header /deep/ .btn-outline-light{
    color: white;
    border-color: white;
  }
</style>

